<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员任务 - 心声社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4A6FFF;
            --primary-light: #E8EEFF;
            --secondary: #FF6B6B;
            --success: #2ECC71;
            --warning: #FFC107;
            --dark: #2D3436;
            --gray: #636E72;
            --light-gray: #F1F5F8;
            --border: #DFE6E9;
            --radius: 10px;
            --shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--dark);
            background-color: #F8FAFC;
            line-height: 1.6;
            padding-top: 2rem;
            padding-bottom: 3rem;
        }
        
        .container {
            max-width: 1140px;
        }
        
        .page-header {
            margin-bottom: 2.5rem;
            text-align: center;
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 0.5rem;
        }
        
        .page-subtitle {
            color: var(--gray);
            font-size: 1.1rem;
        }
        
        .user-status-card {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            border: none;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .status-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .user-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--primary-light);
        }
        
        .user-info h3 {
            font-size: 1.3rem;
            font-weight: 600;
            margin: 0;
        }
        
        .member-badge {
            display: inline-block;
            padding: 0.2rem 0.8rem;
            background-color: var(--primary-light);
            color: var(--primary);
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .progress-section {
            margin-bottom: 1rem;
        }
        
        .progress-title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }
        
        .progress-bar-container {
            height: 8px;
            background-color: var(--light-gray);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background-color: var(--primary);
            border-radius: 4px;
            transition: width 0.5s ease;
        }
        
        .rewards-summary {
            display: flex;
            justify-content: space-between;
            margin-top: 1.5rem;
        }
        
        .reward-item {
            text-align: center;
            flex: 1;
        }
        
        .reward-value {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        .reward-label {
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        .tabs-container {
            margin-bottom: 2rem;
            border-bottom: 1px solid var(--border);
        }
        
        .task-tab {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            color: var(--gray);
            text-decoration: none;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .task-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .task-tab:hover:not(.active) {
            color: var(--dark);
            border-bottom-color: var(--border);
        }
        
        .tasks-container {
            display: none;
        }
        
        .tasks-container.active {
            display: block;
        }
        
        .task-card {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            overflow: hidden;
            margin-bottom: 1.25rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .task-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        }
        
        .task-body {
            padding: 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .task-info {
            flex: 1;
        }
        
        .task-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
        }
        
        .task-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
        
        .icon-daily {
            background-color: rgba(74, 111, 255, 0.1);
            color: var(--primary);
        }
        
        .icon-achievement {
            background-color: rgba(46, 204, 113, 0.1);
            color: var(--success);
        }
        
        .icon-limited {
            background-color: rgba(255, 193, 7, 0.1);
            color: var(--warning);
        }
        
        .icon-special {
            background-color: rgba(255, 107, 107, 0.1);
            color: var(--secondary);
        }
        
        .task-title {
            font-weight: 600;
            margin: 0;
        }
        
        .task-description {
            color: var(--gray);
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
            padding-left: 47px;
        }
        
        .task-meta {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding-left: 47px;
        }
        
        .task-reward {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            color: var(--success);
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .task-difficulty {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.9rem;
        }
        
        .difficulty-easy {
            color: var(--success);
        }
        
        .difficulty-medium {
            color: var(--warning);
        }
        
        .difficulty-hard {
            color: var(--secondary);
        }
        
        .task-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .task-progress {
            width: 80px;
            text-align: center;
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .task-btn {
            padding: 0.5rem 1.25rem;
            border-radius: 6px;
            font-weight: 500;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #3A5FE8;
        }
        
        .btn-success {
            background-color: var(--success);
            color: white;
        }
        
        .btn-success:hover {
            background-color: #27AE60;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
        }
        
        .btn-outline:hover {
            background-color: var(--primary-light);
        }
        
        .limited-badge {
            display: inline-block;
            padding: 0.15rem 0.6rem;
            background-color: var(--warning);
            color: white;
            border-radius: 4px;
            font-size: 0.75rem;
            margin-left: 0.5rem;
        }
        
        .completed-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            color: var(--success);
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .task-body {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .task-actions {
                width: 100%;
                justify-content: space-between;
                align-items: center;
                padding-left: 47px;
            }
            
            .rewards-summary {
                flex-wrap: wrap;
                gap: 1rem;
            }
            
            .reward-item {
                flex: 1 1 40%;
            }
            
            .task-tab {
                padding: 0.75rem 1rem;
                font-size: 0.9rem;
            }
        }
        
        @media (max-width: 576px) {
            .page-title {
                font-size: 1.75rem;
            }
            
            .task-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .task-description, .task-meta, .task-actions {
                padding-left: 0;
            }
            
            .task-actions {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.75rem;
            }
            
            .task-btn {
                width: 100%;
                text-align: center;
            }
            
            .task-tab {
                padding: 0.75rem 0.75rem;
                font-size: 0.85rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">会员任务中心</h1>
            <p class="page-subtitle">完成任务获取奖励，提升你的会员等级</p>
        </div>
        
        <!-- 用户状态卡片 -->
        <div class="card user-status-card">
            <div class="status-header">
                <img src="https://picsum.photos/seed/user1/200/200" alt="用户头像" class="user-avatar">
                <div class="user-info">
                    <h3>城市夜行者 <span class="member-badge">白银会员</span></h3>
                    <p class="text-muted">距离升级到黄金会员还需 350 积分</p>
                </div>
            </div>
            
            <div class="progress-section">
                <div class="progress-title">
                    <span>会员进度</span>
                    <span>650/1000 积分</span>
                </div>
                <div class="progress-bar-container">
                    <div class="progress-bar" style="width: 65%;"></div>
                </div>
            </div>
            
            <div class="rewards-summary">
                <div class="reward-item">
                    <div class="reward-value">12</div>
                    <div class="reward-label">进行中任务</div>
                </div>
                <div class="reward-item">
                    <div class="reward-value">87</div>
                    <div class="reward-label">已完成任务</div>
                </div>
                <div class="reward-item">
                    <div class="reward-value">3,540</div>
                    <div class="reward-label">我的积分</div>
                </div>
                <div class="reward-item">
                    <div class="reward-value">15</div>
                    <div class="reward-label">获得成就</div>
                </div>
            </div>
        </div>
        
        <!-- 任务标签页 -->
        <div class="tabs-container">
            <div class="task-tab active" data-tab="daily">日常任务</div>
            <div class="task-tab" data-tab="achievement">成就任务</div>
            <div class="task-tab" data-tab="limited">限时任务</div>
            <div class="task-tab" data-tab="special">会员专属</div>
        </div>
        
        <!-- 日常任务 -->
        <div class="tasks-container active" id="daily-tasks">
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-daily">
                                <i class="fas fa-sign-in-alt"></i>
                            </div>
                            <h3 class="task-title">每日签到</h3>
                        </div>
                        <p class="task-description">连续签到可获得额外奖励，今天是你连续签到的第5天</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 10 积分
                            </div>
                            <div class="task-difficulty difficulty-easy">
                                <i class="fas fa-signal"></i> 简单
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <button class="task-btn btn-success">
                            <i class="fas fa-check"></i> 已完成
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-daily">
                                <i class="fas fa-comment"></i>
                            </div>
                            <h3 class="task-title">发表评论</h3>
                        </div>
                        <p class="task-description">在任意树洞下发表有意义的评论，帮助他人或分享你的观点</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 15 积分
                            </div>
                            <div class="task-difficulty difficulty-easy">
                                <i class="fas fa-signal"></i> 简单
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <div class="task-progress">2/3</div>
                        <button class="task-btn btn-primary">
                            继续完成
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-daily">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h3 class="task-title">点赞内容</h3>
                        </div>
                        <p class="task-description">发现精彩内容并点赞，鼓励创作者分享更多优质内容</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 5 积分
                            </div>
                            <div class="task-difficulty difficulty-easy">
                                <i class="fas fa-signal"></i> 简单
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <div class="task-progress">0/5</div>
                        <button class="task-btn btn-primary">
                            去完成
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-daily">
                                <i class="fas fa-pen"></i>
                            </div>
                            <h3 class="task-title">发布树洞</h3>
                        </div>
                        <p class="task-description">分享你的生活感悟或心情，与社区中的朋友交流互动</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 30 积分
                            </div>
                            <div class="task-difficulty difficulty-medium">
                                <i class="fas fa-signal"></i> 中等
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <div class="task-progress">0/1</div>
                        <button class="task-btn btn-primary">
                            去完成
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 成就任务 -->
        <div class="tasks-container" id="achievement-tasks">
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-achievement">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <h3 class="task-title">坚持不懈</h3>
                        </div>
                        <p class="task-description">连续签到30天，培养良好的社区习惯</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 200 积分
                            </div>
                            <div class="task-reward">
                                <i class="fas fa-trophy"></i> 坚持不懈勋章
                            </div>
                            <div class="task-difficulty difficulty-medium">
                                <i class="fas fa-signal"></i> 中等
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <div class="task-progress">5/30</div>
                        <button class="task-btn btn-outline">
                            进行中
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-achievement">
                                <i class="fas fa-comments"></i>
                            </div>
                            <h3 class="task-title">评论达人</h3>
                        </div>
                        <p class="task-description">累计发表100条评论，成为社区活跃讨论者</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 300 积分
                            </div>
                            <div class="task-reward">
                                <i class="fas fa-trophy"></i> 评论达人勋章
                            </div>
                            <div class="task-difficulty difficulty-medium">
                                <i class="fas fa-signal"></i> 中等
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <div class="task-progress">78/100</div>
                        <button class="task-btn btn-outline">
                            进行中
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-achievement">
                                <i class="fas fa-fire"></i>
                            </div>
                            <h3 class="task-title">热门创作者</h3>
                        </div>
                        <p class="task-description">发布的树洞累计获得1000个点赞，成为社区受欢迎的创作者</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 1000 积分
                            </div>
                            <div class="task-reward">
                                <i class="fas fa-trophy"></i> 热门创作者勋章
                            </div>
                            <div class="task-difficulty difficulty-hard">
                                <i class="fas fa-signal"></i> 困难
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <div class="task-progress">456/1000</div>
                        <button class="task-btn btn-outline">
                            进行中
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-achievement">
                                <i class="fas fa-users"></i>
                            </div>
                            <h3 class="task-title">社交达人</h3>
                        </div>
                        <p class="task-description">关注50位社区用户，拓展你的社交圈</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 250 积分
                            </div>
                            <div class="task-reward">
                                <i class="fas fa-trophy"></i> 社交达人勋章
                            </div>
                            <div class="task-difficulty difficulty-medium">
                                <i class="fas fa-signal"></i> 中等
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <div class="task-progress">32/50</div>
                        <button class="task-btn btn-outline">
                            进行中
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 限时任务 -->
        <div class="tasks-container" id="limited-tasks">
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-limited">
                                <i class="fas fa-gift"></i>
                            </div>
                            <h3 class="task-title">周末福利 <span class="limited-badge">剩余2天</span></h3>
                        </div>
                        <p class="task-description">周末期间发布3条树洞，分享你的周末生活</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 100 积分
                            </div>
                            <div class="task-reward">
                                <i class="fas fa-gem"></i> 50 钻石
                            </div>
                            <div class="task-difficulty difficulty-medium">
                                <i class="fas fa-signal"></i> 中等
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <div class="task-progress">1/3</div>
                        <button class="task-btn btn-primary">
                            去完成
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-limited">
                                <i class="fas fa-birthday-cake"></i>
                            </div>
                            <h3 class="task-title">社区周年庆 <span class="limited-badge">剩余5天</span></h3>
                        </div>
                        <p class="task-description">参与周年庆话题讨论，分享你与社区的故事</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 150 积分
                            </div>
                            <div class="task-reward">
                                <i class="fas fa-trophy"></i> 周年纪念勋章
                            </div>
                            <div class="task-difficulty difficulty-easy">
                                <i class="fas fa-signal"></i> 简单
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <div class="task-progress">0/1</div>
                        <button class="task-btn btn-primary">
                            去完成
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-limited">
                                <i class="fas fa-user-plus"></i>
                            </div>
                            <h3 class="task-title">邀请好友 <span class="limited-badge">剩余7天</span></h3>
                        </div>
                        <p class="task-description">成功邀请3位新用户注册并完成新手任务</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 500 积分
                            </div>
                            <div class="task-reward">
                                <i class="fas fa-gem"></i> 200 钻石
                            </div>
                            <div class="task-difficulty difficulty-hard">
                                <i class="fas fa-signal"></i> 困难
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <div class="task-progress">0/3</div>
                        <button class="task-btn btn-primary">
                            去完成
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 会员专属任务 -->
        <div class="tasks-container" id="special-tasks">
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-special">
                                <i class="fas fa-crown"></i>
                            </div>
                            <h3 class="task-title">会员专享签到</h3>
                        </div>
                        <p class="task-description">会员每日额外签到奖励，彰显你的会员特权</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 20 积分
                            </div>
                            <div class="task-reward">
                                <i class="fas fa-gem"></i> 10 钻石
                            </div>
                            <div class="task-difficulty difficulty-easy">
                                <i class="fas fa-signal"></i> 简单
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <button class="task-btn btn-success">
                            <i class="fas fa-check"></i> 已完成
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-special">
                                <i class="fas fa-paint-brush"></i>
                            </div>
                            <h3 class="task-title">会员专属装扮</h3>
                        </div>
                        <p class="task-description">使用会员专属头像框或主题，个性化你的个人主页</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 50 积分
                            </div>
                            <div class="task-difficulty difficulty-easy">
                                <i class="fas fa-signal"></i> 简单
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <div class="task-progress">0/1</div>
                        <button class="task-btn btn-primary">
                            去完成
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="task-card">
                <div class="task-body">
                    <div class="task-info">
                        <div class="task-header">
                            <div class="task-icon icon-special">
                                <i class="fas fa-comments-dollar"></i>
                            </div>
                            <h3 class="task-title">会员专属活动</h3>
                        </div>
                        <p class="task-description">参与会员专属线上活动，结交更多志同道合的朋友</p>
                        <div class="task-meta">
                            <div class="task-reward">
                                <i class="fas fa-star"></i> 200 积分
                            </div>
                            <div class="task-reward">
                                <i class="fas fa-trophy"></i> 会员精英勋章
                            </div>
                            <div class="task-difficulty difficulty-medium">
                                <i class="fas fa-signal"></i> 中等
                            </div>
                        </div>
                    </div>
                    <div class="task-actions">
                        <div class="task-progress">0/1</div>
                        <button class="task-btn btn-primary">
                            去完成
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 标签页切换功能
            const taskTabs = document.querySelectorAll('.task-tab');
            
            taskTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 移除所有标签的active类
                    taskTabs.forEach(t => t.classList.remove('active'));
                    // 给当前点击的标签添加active类
                    this.classList.add('active');
                    
                    // 隐藏所有任务容器
                    const taskContainers = document.querySelectorAll('.tasks-container');
                    taskContainers.forEach(container => container.classList.remove('active'));
                    
                    // 显示对应的任务容器
                    const tabId = this.getAttribute('data-tab');
                    document.getElementById(`${tabId}-tasks`).classList.add('active');
                });
            });
            
            // 任务按钮交互
            const taskButtons = document.querySelectorAll('.task-btn');
            
            taskButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 如果是"去完成"或"继续完成"按钮
                    if (this.textContent.includes('去完成') || this.textContent.includes('继续完成')) {
                        const taskCard = this.closest('.task-card');
                        const taskTitle = taskCard.querySelector('.task-title').textContent;
                        
                        // 模拟任务完成进度更新
                        if (this.textContent.includes('继续完成')) {
                            const progressEl = this.parentElement.querySelector('.task-progress');
                            const currentProgress = progressEl.textContent.split('/');
                            const newProgress = parseInt(currentProgress[0]) + 1;
                            const totalProgress = currentProgress[1];
                            
                            if (newProgress >= totalProgress) {
                                progressEl.remove();
                                this.textContent = '领取奖励';
                                this.classList.remove('btn-primary');
                                this.classList.add('btn-success');
                            } else {
                                progressEl.textContent = `${newProgress}/${totalProgress}`;
                            }
                        } else {
                            // 对于"去完成"按钮，这里可以跳转到相应的页面
                            alert(`正在前往完成任务：${taskTitle}`);
                        }
                    } 
                    // 如果是"领取奖励"按钮
                    else if (this.textContent.includes('领取奖励')) {
                        const taskCard = this.closest('.task-card');
                        const taskTitle = taskCard.querySelector('.task-title').textContent;
                        const taskReward = taskCard.querySelector('.task-reward').textContent;
                        
                        alert(`恭喜！你已完成任务"${taskTitle}"，获得奖励：${taskReward}`);
                        
                        // 更新按钮状态为已完成
                        this.innerHTML = '<i class="fas fa-check"></i> 已完成';
                    }
                });
            });
            
            // 为限时任务添加倒计时效果
            function updateCountdowns() {
                const limitedBadges = document.querySelectorAll('.limited-badge');
                
                limitedBadges.forEach(badge => {
                    if (badge.textContent.includes('剩余')) {
                        const days = parseInt(badge.textContent.match(/\d+/)[0]);
                        if (days > 0) {
                            // 这里只是模拟倒计时，实际应用中应该从服务器获取准确时间
                            badge.title = `剩余 ${days} 天 ${Math.floor(Math.random() * 24)} 小时`;
                        }
                    }
                });
            }
            
            // 初始化倒计时
            updateCountdowns();
        });
    </script>
</body>
</html>

